<script>
import { Component, Emit, Inject, Model, Prop, Provide, Vue, Watch } from 'vue-property-decorator';
import { State,Mutation } from 'vuex-class';
// import swiper from "@/utils/swiper.js"  swiper.js
import { uuid } from "@/utils/common.js"
import less from "./less"

@Component
export default class App extends Vue {
    swiperOptions = {
        el: "",
        swiperEl: "",
        swiperItemEl : "",
        indicatorEl: "",
        indicatorActiveClass: "active"
    }

    @State("uuid_list") uuid_list
    @State("javascript_option") javascript_option
    @Mutation('SET_DATA') SET_DATA
    created(){ 
        this.swiperOptions = {
            el: this.get_uuid(),
            swiperEl: this.get_uuid(),
            swiperItemEl : `${this.get_uuid()}`,
            indicatorEl: `${this.get_uuid()}`,
            indicatorColor: '#b6b6b6',
            indicatorActiveColor: '#ffffff'
        }
        // 实例化参数数组
        let javascript_option_swiper
        if(!this.javascript_option.swiper) javascript_option_swiper = [];
        else javascript_option_swiper = JSON.parse(JSON.stringify(this.javascript_option.swiper))
        javascript_option_swiper.push({ ...this.swiperOptions })
        this.SET_DATA({
             key : "javascript_option" , value:{ ...this.javascript_option , swiper: javascript_option_swiper } 
        })
    }
    mounted(){
        this.swiperFn = new swiper({ ...this.swiperOptions })
    }
    get_uuid(){
        let uid = uuid(6)
        let flag = true
        while (flag){
            if(this.uuid_list.indexOf(uid) == -1){
                this.uuid_list.push(uid)
                flag = false
            }else{
                uid = uuid(6)
                flag = true
            }
        }
        this.SET_DATA({
             key : "uuid_list" , value:[ ...this.uuid_list ]
        })
        return uid
    }
    stop(){ 
        this.swiperFn.stop()
    }
    render(){
        // el: this.get_uuid(),
        // swiperEl: this.get_uuid(),
        // swiperItemEl : this.get_uuid(),
        // indicatorEl: this.get_uuid(),
        return (
             <div style={less.swiper_view} styleJson={JSON.stringify(less.swiper_view)} id={this.swiperOptions.el} >
                <div style={less.swiper}  id={this.swiperOptions.swiperEl} styleJson={JSON.stringify(less.swiper)} >
                    <div class={this.swiperOptions.swiperItemEl} style={less.swiper_item} styleJson={JSON.stringify(less.swiper_item)} > <img style={less.swiper_item_img} stylejson={JSON.stringify(less.swiper_item_img)} src="http://106.12.76.26:3560/static/image/Cbanner.jpeg" /> </div>
                    <div class={this.swiperOptions.swiperItemEl} style={less.swiper_item}  styleJson={JSON.stringify(less.swiper_item)} >  <img style={less.swiper_item_img} stylejson={JSON.stringify(less.swiper_item_img)} src="http://106.12.76.26:3560/static/image/Abanner.jpg" /> </div>
                    <div class={this.swiperOptions.swiperItemEl} style={less.swiper_item}  styleJson={JSON.stringify(less.swiper_item)} >  <img style={less.swiper_item_img} stylejson={JSON.stringify(less.swiper_item_img)} src="http://106.12.76.26:3560/static/image/Bbanner.jpg" /> </div>
                    <div class={this.swiperOptions.swiperItemEl} style={less.swiper_item}  styleJson={JSON.stringify(less.swiper_item)} > <img style={less.swiper_item_img} stylejson={JSON.stringify(less.swiper_item_img)} src="http://106.12.76.26:3560/static/image/Cbanner.jpeg" /> </div>
                    <div class={this.swiperOptions.swiperItemEl} style={less.swiper_item}  styleJson={JSON.stringify(less.swiper_item)} > <img style={less.swiper_item_img} stylejson={JSON.stringify(less.swiper_item_img)} src="http://106.12.76.26:3560/static/image/Abanner.jpg" /> </div>
                </div>
                <div style={less.swiper_indicator}   styleJson={JSON.stringify(less.swiper_indicator)} >
                    <div  style={less.swiper_indicator_item}   styleJson={JSON.stringify(less.swiper_indicator_item)}  class={this.swiperOptions.indicatorEl} onClick={ ()=>this.swiperFn.setSwipeIndex(0) } ></div>
                    <div  style={less.swiper_indicator_item}  styleJson={JSON.stringify(less.swiper_indicator_item)}   class={this.swiperOptions.indicatorEl} onClick={ ()=>this.swiperFn.setSwipeIndex(1) } ></div>
                    <div  style={less.swiper_indicator_item}  styleJson={JSON.stringify(less.swiper_indicator_item)}   class={this.swiperOptions.indicatorEl} onClick={ ()=>this.swiperFn.setSwipeIndex(2) } ></div>
                </div>
             </div>
        )
    }
}
</script>
